*{
  padding:0;
  margin:0;
}
body{
background: url(../images/stars-opacity.0979c1.svg);
}
/*顶部区域*/ 
.main_top{
  width:100%;
  height:100px;
  background-color: cornflowerblue;
}
.main_top h3{
  margin:0;
  padding-top:0;
  padding-left:20px;
  line-height:100px;
  float:left;
}
.main_top button{
  margin-top:40px;
  float:right;
  margin-right:40px;
  background-color: cyan;
}
/*饮料专区*/
.snack{
  width:1300px;
  height:400px;
  background-color: #f5f5f5;
  margin:0 auto;
  margin-top:20px;
}
 .snack-content{
          width:1260px;
          height:300px;
       position: relative;
       margin:20px auto;
       background-color: rgb(255, 249, 249);
       overflow: hidden;
      }
      .snack-content div{
          width:240px;
          height:98%;
         position: absolute;
         top:2px;
      }

      .snack-content div:hover{
        border:1px solid orangered;
      }

      .snack-content h4{
        text-align:center;
      }
      .snack-content p{
        text-align:center;
        padding-top:10px;
        color:red;
        
      }
      .snack-content button{
        width:42px;
        height:44px;
        border-radius: 50%;
        float:right;
        position: absolute;
        top:230px; 
         right:20px;
        color:white;
        background-color:rgb(199,33,33);
      }
      .snack-content button:hover{
        width:42px;
        height:44px;
        border-radius: 30%;
      }
      .snack-one{ 
        left:10px;
        background-color: white;
      border-top:1px solid orangered;
      }
      .snack-two{
          left:260px;
          background-color: white;
          border-top:1px solid violet;
      }
      .snack-three{
          left:510px;
          background-color: white;
          border-top:1px solid #00c0a5;
      }
      .snack-four{
          left:760px;
          background-color: white;
          border-top:1px solid  #2196f3;
      }
      .snack-five{
          left:1010px;
          background-color: white;
          border-top:1px solid  #ffac13;
      }
      .snack-six{
          left:1260px;
          background-color: white;
          border-top:1px solid  #589611;
      }
    .snack-content h3 {
  padding-top: 30px;
  padding-left: 30px;
    }

    /*宣传专区*/
    .propager{
  width: 1300px;
  height: 150px;
  margin: 0 auto;
  margin-top: 20px;
    }
    .propager .left-tp {
  width: 640px;
  height: 100%;
  float: left;
    }
    .propager .right-tp {
  width: 640px;
  height: 100%;
  float: right;
}
.diffuser{
  width:1300px;
  height:60px;
  margin:10px auto;
  text-align: center;
}
.diffuser h1{
  font-size: 20px;
  text-align: center;
  line-height:60px;
}
/*零食专区*/
.casse{
  width: 1300px;
  height: 430px;
  background-color: #f5f5f5;
  margin: 0 auto;
  margin-top: 20px;
}
 h3{
padding-top: 30px;
padding-left: 30px;
}
.casse .casse-content .casse-box{
width:300px;
height:300px;
background-color:white;
float:left;
margin-left: 20px;
margin-top: 30px;
}
.casse .casse-content .casse-box img{
width:250px;
height:200px;
margin-top: 10px;
transition:0.3s;
overflow: hidden;
}
.casse .casse-content .casse-box .tp{
width:300px;
height:220px;
text-align: center;
background-color: yellow;
overflow: hidden;
}
.casse .casse-content .casse-box .tp:hover img{
margin-top:-10px;
width:300px;
height:230px;

}
.casse .casse-content .casse-box .nr{
width:300px;
height:78px;
border-bottom:1px solid yellow;

}
.casse .casse-content .casse-box .nr p{
float: right;
line-height:78px;
margin-left: 20px;
color: red;
}
.casse .casse-content .casse-box .nr p button{
width:71px;
height:36px;
background-color:rgb(199, 33, 33);
color: white;
border-radius: 20px;
}
.casse .casse-content .casse-box .nr h4{
display: inline;
line-height: 78px;
}
.casse .casse-content .casse-box #tp2{
background-color: violet;
}
.casse .casse-content .casse-box #nr2{
border-bottom: 1px solid violet;
}
.casse .casse-content .casse-box #tp3{
background-color:aqua;
}
.casse .casse-content .casse-box #nr3{
border-bottom: 1px solid aqua;
}
.casse .casse-content .casse-box #tp4{
background-color:chartreuse;
}
.casse .casse-content .casse-box #nr4{
border-bottom: 1px solid chartreuse;
}

/*酒专区*/

  .alcool{
   width: 1300px;
  height: 380px;
  background-color: #f5f5f5;
  margin: 20px auto;
      }
  .alcool div{
 display:inline-block; 
   }
  .alcool .box{
  width: 300px;
  height: 300px;
  background-color: white;
  float: left;
  margin-left: 20px;
  margin-top: 30px;
  overflow: hidden;
  position: relative;
  }
   .alcool .box .boxx{
  width:4%;
  height:4%;
  background-color: salmon;
  position: absolute;
  top:5%;
  left:5%;
  transition: 1s;
      }

     .alcool .box .boxx h2{
       padding-top:40px;
         text-align: center;
         color:white;
         display: none;
      }
      .alcool .box .boxx p{
        padding-top:40px;
        color:red;
        text-align:center;
        display: none;   
      }

     .alcool .box .boxx button{
      width:100px;
      height:30px;
      margin:10px auto;
      background:rgb(199, 33, 33);
      color:white;
      display: none;
     }
     .alcool a{
      text-decoration:none;
     }
      .alcool .box:hover .boxx{
          width:90%;
          height:90%;
          background:rgba(0, 0, 1, 0.45);
          display: block;
      }
      .alcool .box:hover h2{
          display: block;
      }
      .alcool .box:hover p{
        display: block;
      }
      .alcool .box:hover button{
          display: block;
      }
      .alcool .box img{
          width: 100%;
          height:100%;
          transition: 1s;
      }
      .alcool .box:hover img{
          transform: scale(1.2);
      }

/*   宣传专区*/
.two{
width:1300px;
height:150px;
margin: 0 auto;
margin-top: 20px;
}
.two .left-tp{
width:640px;
height:100%;
float:left;
}
.two .right-tp{
width:640px;
height:100%;
float:right;
}
